<template>
	<view class="content">
		<uni-notice-bar show-icon scrollable text="邓老师温馨提示你:该教水费/电费住/宿费/学费了" />
		<view class="">
			<uni-search-bar @confirm="search" :focus="true" v-model="searchValue" @input="input">
			</uni-search-bar>
		</view>
		<view style="position: relative;" v-for="(item,index) in newlist" :key="index">
			<uni-card :title=item.name extra="" :thumbnail="avatar" @click="onClick">
				<view class="uni-body">
					<view class="bianji">
						<uni-icons type="close" size="25" style="color: red;" @click="removeinfo(item.id)"></uni-icons>
						<uni-icons type="compose" size="25" @click="edit(item.id)"></uni-icons>
					</view>
					<view>学生姓名：{{ item.name }}</view>
					<view>学生性别：{{item.sex == 0 ? '男' : '女' }}</view>
					<view>学生年龄：{{item.age}}</view>
					<view>手机号：{{ item.iphone }}</view>
				</view>
				<view class="statusinfo" @click="statusinfo(item.id)">
					------点击查看学生详情---------
				</view>
			</uni-card>
			</uni-section>
		</view>
		<uni-fab ref="fab" :horizontal="horizontal" :vertical="vertical" :direction="direction"
			@trigger="trigger" @fabClick="fabClick" />
	</view>
</template>

<script>
	import {
		webgetlist,
		webremove,
		webaddlist
	} from "../../wxapi/main.js"
	export default {
		data() {
			return {
				vertical: 'bottom',
				direction: 'horizontal',
				horizontal: 'right',
				content: [{
						iconPath: '@statis/logo.png',
						selectedIconPath: '@statis/logo.png',
						text: '添加新同学',
						active: false
					},
				],
				avatar: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
				newlist: [],
				searchValue: null
			}
		},
		onLoad() {
			this.getlist()
		},
		onShow() {
			this.getlist()
		},
		methods: {
			statusinfo(id){
				uni.navigateTo({
					url:`/pages/studentinfo/studentinfo?id=${id}`
				})
			},
			fabClick() {
				uni.showToast({
					title: '添加新同学',
					icon: 'none'
				})
				uni.navigateTo({
					url:"/pages/add/add"
				})
			},
			trigger(e) {
				this.content[e.index].active = !e.item.active
				uni.showModal({
					title: '提示',
					content: `您${this.content[e.index].active ? '选中了' : '取消了'}${e.item.text}`,
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定')
						} else if (res.cancel) {
							console.log('用户点击取消')
						}
					}
				})
			},
			edit(id) {
				uni.navigateTo({
					url:`/pages/edit/edit?id=${id}`
				})
			},
			//获取列表
			getlist() {
				try {
					const userData = uni.getStorageSync('userData');
					if (userData) {
						let webid = userData.webid
						webgetlist({
							webid
						}).then(res => {
							this.newlist = res.data.data
						})
					} else {
						console.log('未找到用户数据');
					}
				} catch (e) {
					console.error('获取用户数据时发生错误:', e);
				}
			},

			//删除事件
			removeinfo(id) {
				uni.showModal({
					title: '确认删除',
					content: '是否删除该条留言？',
					success: (res) => {
						if (res.confirm) {
							webremove({
								id: id
							}).then(res => {
								this.getlist()
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			onClick(e) {
				console.log(e)
			},
			//搜索事件
			search(res) {
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
			},
			input(res) {
				//搜索事件
				webgetlist({
					name: res
				}).then(res => {
					this.newlist = res.data.data
					if (!this.newlist) {
						uni.showToast({
							title: `搜索不到该学生`,
							icon: 'none',
							duration: 800,
						})
					}
				})
			},


		}
	}
</script>

<style>
	* {
		margin: 0;
		padding: 0;
	}

	.bianji {
		position: absolute;
		top: 30rpx;
		right: 20rpx;
	}
	.statusinfo{
		text-align: center;
	}
</style>